<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app" style="color: red; font-size: 20px;"> 
    {{a}} {{b}} {{c.d}} {{e}}
  </div>
  <!-- <h1>555 <span>66</span></h1> -->

  <!-- <script src="./node_modules/vue/dist/vue.js"></script> -->
  <script src="./dist/vue.js"></script>
  <script>
    const handleWatchE = (newVal, oldVal) => {
      console.log('newVal111==', newVal)
    }

    let vm = new Vue({
      el: '#app',
      data: {
        a: 1,
        b: 'hello',
        c: {
          d: {
            f: 1
          }
        },
        e: 'test'
      },
      methods: {
        handleWatchE (newVal, oldVal) {
          console.log('newVal111==', newVal)
        }
      },
      // watch 基本使用方法
      // 1、属性：方法（函数）
      // 2、属性：数组
      // 3、属性：对象
      // 4、属性：字符串
      watch: {
        // a (newVal, oldVal) {
        //   console.log('newVal==', newVal)
        // },

        // b: [
        //   (newVal, oldVal) => {
        //     console.log('newVal==', newVal)
        //   },
        //   (newVal, oldVal) => {
        //     console.log('newVal==', newVal)
        //   }
        // ],

        'c.d.f': {
          handler (newVal, oldVal) {
            console.log('newVal==', newVal)
          },
          deep: true,
          imediate: true
        },

        // e: handleWatchE
      }
    })

    // vm.a = 100
    // vm.b = 'world'
    vm.c.d.f = 2
    // vm.e = '11'

    // console.log('vm===', vm)
  </script>
</body>
</html>

<!-- 
  1、安装vue
  2、watch 4中基本使用
  3、在自己vue的初始化中进行格式化
  4、watch最终实现方式 $watch



-->